﻿<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <title>touch.js demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="js/touch.min.js"></script>
    <script type="text/javascript" src="js/cat.touchjs.js"></script>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/common.js?v=1"></script>
    <style>
        body {margin: 0;}
        .clip{display: none;}
        .posiFixed {position: fixed;width: 100%;top: 0;left: 0;}
        .clipDivCover{height: 100%;}
        .clipTitle{width: 15vw;height: 15vw;}
        #clipConfirm{left:85vw;}

    </style>
</head>
<body>
        <input type="file" id="upload" accept="image/png,image/jpeg">
    <div id="clip" class="clip">
        <img id="clipImg" class="clipImg posiFixed" />
        <img id="clipImgCover" class="clipImgCover posiFixed" src="images/cover.png" />
        <img class="posiFixed" src="images/cutTitle.png" />
        <div id="clipDivCover" class="posiFixed clipDivCover"></div>
        <div id="clipClose" class="posiFixed clipTitle"></div>
        <div id="clipConfirm" class="posiFixed clipTitle"></div>
    </div>
    <canvas id="canvas"></canvas>
    <ul style="position:fixed;bottom:0">
        <li>
            <span>left：</span>
            <span id="left">0</span>
        </li>
        <li>
            <span>top：</span>
            <span id="top">0</span>
        </li>
        <li>
            <span>scale：</span>
            <span id="scale">1</span>
        </li>
        <li>
            <span>rotate：</span>
            <span id="rotate">0</span>
        </li>
    </ul>
    <div>
    </div>
    </div>

    <script type="text/javascript">
    var circleRadius = window.innerWidth*560/750/2;//原型半径
    var circleX=window.innerWidth/2-circleRadius;//圆形X坐标
    var circleY=window.innerHeight/2-circleRadius;//圆形Y坐标
    var clipImgW;//图片原始宽度
    var clipImgH;//图片原始高度

        $(function () {
            var upload = document.getElementById("upload");//上传图片input按钮
            var  clipImg= $('#clipImg');
            var clipImgCover = $('#clipImgCover');
            var clipDivCover = $('#clipDivCover');
            upload.onchange = function () {
                var file = upload.files[0];
                if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
                    alert('不是有效的图片');
                    console.log(file.type);
                    return;
                }
                $('#clip').show();
                $(clipImg).attr("src",window.URL.createObjectURL(upload.files[0]));
               var setInt=setInterval(function(){
                    if ($(clipImg).height() > 0) {
                       clipImgW = $(clipImg).width();
                       clipImgH = $(clipImg).height();
                       cat.touchjs.deviation=(window.innerHeight-clipImgH)/2;
                       $(clipImg).css("top",cat.touchjs.deviation+"px");
                       cat.touchjs.top=cat.touchjs.deviation;
                       console.log(clipImgW, clipImgH);
                       clearInterval(setInt);
                   }
                },200)
               
                $(clipImgCover).css("top",(window.innerHeight-window.innerWidth*2)/2+"px");
            }

            //初始化设置
            cat.touchjs.init(clipDivCover,clipImg, function (left, top, scale, rotate) {
                $('#left').text(left);
                $('#top').text(top);
                $('#scale').text(scale);
                $('#rotate').text(rotate);
                clipImg.css({
                    left: left,
                    top: top,
                    'transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)',
                    '-webkit-transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)'
                });
            });
            //初始化拖动手势（不需要就注释掉）
            cat.touchjs.drag(clipDivCover,clipImg, function (data) {
                $('#left').text(data.left);
                $('#top').text(data.top);
            });
            //初始化缩放手势（不需要就注释掉）
            cat.touchjs.scale(clipDivCover,clipImg, function (data) {
                $('#scale').text(data.scaleVal);
            });
            //重置
            function Reset(){
                cat.touchjs.left=0;
                cat.touchjs.top=0;
                cat.touchjs.scaleVal=1;
                cat.touchjs.curStatus=0;
                cat.touchjs.deviation=0;
                cat.touchjs.ydx=0;
                cat.touchjs.ydy=0;
                clipImg.css("transform", 'scale('+ cat.touchjs.scaleVal+')').css("left", cat.touchjs.ydx).css("top", cat.touchjs.ydy);
                clipImg.attr("src","");
            }

            $('#clipClose').click(function(){
                Reset();
                $('#clip').hide();
            });
            $('#clipConfirm').click(function(){
                // var canvas = document.createElement('canvas');
                var canvas = document.getElementById('canvas');
                var Img = new Image();
                Img.src = clipImg.get(0).src;
                console.log(Img.width,Img.height);
                canvas.width = circleRadius*2;
                canvas.height = circleRadius*2;
                var ctx = canvas.getContext('2d');
                // ctx.drawImage(clipImg.get(0),Img.width/2-(circleRadius+cat.touchjs.left)*Img.width/clipImgW/cat.touchjs.scaleVal,Img.height/2-(circleRadius+cat.touchjs.top-cat.touchjs.deviation)*Img.height/clipImgH/cat.touchjs.scaleVal, Img.width, Img.height, 0, 0, clipImgW*cat.touchjs.scaleVal, clipImgH*cat.touchjs.scaleVal);//原始图片的像素值
                ctx.drawImage(Img,Img.width/2-(circleRadius+cat.touchjs.left)*Img.width/clipImgW/cat.touchjs.scaleVal,Img.height/2-(circleRadius+cat.touchjs.top-cat.touchjs.deviation)*Img.height/clipImgH/cat.touchjs.scaleVal, Img.width, Img.height, 0, 0, clipImgW*cat.touchjs.scaleVal, clipImgH*cat.touchjs.scaleVal);
                Reset();
                $('#clip').hide();
            });
        });
       
    </script>
</body>

</html>